// 自定义适配
export function useAutoScale(
  boxSize: { width: Ref<number>; height: Ref<number> },
  config: { width: number; height: number; useRotate?: boolean },
) {
  const { width, height } = boxSize
  const { width: WIDTH, height: HEIGHT, useRotate } = config
  const data = reactive({
    scale: 1,
    rotate: 0,
  })

  const bindInfo = computed(() => {
    const { scale, rotate } = data
    return {
      style: {
        '--tw-scale-x': scale,
        '--tw-scale-y': scale,
        '--tw-rotate': rotate + 'deg',
        height: HEIGHT + 'px',
        width: WIDTH + 'px',
      },
      class: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
    }
  })
  onMounted(() => {
    watch(
      [() => width.value, () => height.value],
      (e) => {
        const { w, h } = { w: width.value, h: height.value }
        let scale = 1,
          rotate = 0
        if (useRotate && w < h) {
          rotate = 90
          scale = Math.min(h / WIDTH, w / HEIGHT)
        } else {
          rotate = 0
          scale = Math.min(w / WIDTH, h / HEIGHT)
        }
        Object.assign(data, { scale, rotate })
      },
      { immediate: true },
    )
  })

  return bindInfo
}
